<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>	
	<script src="js/home.js"></script>	
	<script type="text/javascript">
		var arr = null;
	</script>
</head>
<body>
	<div data-role="page" id="contact">
		<div data-role="header" >
			<h1>Contact Book</h1>
			<div data-role="navbar">
			  <ul>
			    <li><a href="#contact" data-icon="home" class="ui-btn-active ui-state-persist">Contact</a></li>
			    <li><a href="#history" data-icon="arrow-r">History</a></li>
			    <li><a href="#group" data-icon="search">Group</a></li>
			    <li><a href="#activity" data-icon="plus">Activity</a></li>
			  </ul>
			</div>
		</div>

		<script>
			arr=["Adele", "Billy", "Bob", "Calvin","Cameron", "Christina", "Yasmine"];
		</script>

		<div data-role="content">
			<h2>Add new contact</h2>
			<form id="addcontactForm">
				<div data-role="fieldcontain">
					<label for="name">Name: </label>
					<input id="name" name="name" type="text">
				</div>
				<input id="submitButton" type="submit" value="Submit" data-inline="true">
			</form>

		    <h2>Contact List</h2>
			<ul id="contactlist" data-role="listview" data-autodividers="true" data-inset="false" data-filter="true" data-filter-placeholder="Search For Names...">		    
				<script>
					for(var i=0; i<arr.length; i++)
						document.write("<li><a href='person.html' rel='external'><img src='https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ9meexU-cHE6AZpe_kZ-JiNh2uDwLR_YZgSik9nrS8xksErZBNjA'> <h3>" + arr[i] + "</h3></img></a></li>")
				</script>	
		    </ul>

		</div>
		<div data-role="footer" data-position="fixed">
			<h1>Footer</h1>
		</div>
	</div>

	<div data-role="page" id="history">
		<div data-role="header">
			<h1>Contact Book</h1>
			<div data-role="navbar">
			  <ul>
			    <li><a href="#contact" data-icon="home" >Contact</a></li>
			    <li><a href="#history" data-icon="arrow-r" class="ui-btn-active ui-state-persist">History</a></li>
			    <li><a href="#group" data-icon="search">Group</a></li>
			    <li><a href="#activity" data-icon="plus">Activity</a></li>
			  </ul>
			</div>
		</div>
		<div data-role="content">
			<p>This is history list</p>
		</div>
		<div data-role="footer">
			<h1>Footer</h1>
		</div>
	</div>

	<div data-role="page" id="group">
		<div data-role="header">
			<h1>Contact Book</h1>
			<div data-role="navbar">
			  <ul>
			    <li><a href="#contact" data-icon="home" >Contact</a></li>
			    <li><a href="#history" data-icon="arrow-r">History</a></li>
			    <li><a href="#group" data-icon="search" class="ui-btn-active ui-state-persist">Group</a></li>
			    <li><a href="#activity" data-icon="plus">Activity</a></li>
			  </ul>
			</div>
		</div>
		<div data-role="content">
			<form>
				<button type="button" data-icon="plus" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add group</button>
				<button type="button" data-icon="minus" data-iconpos="right" data-mini="true" data-inline="true" id="delete">Delete last group</button>
			</form>
			<br>	
			<ul id = "grouplist" data-role="listview" data-inset="false" data-filter="true" data-filter-placeholder="search/add group name...">
				<li data-role="list-divider">Phone</li>
				<li><a href="#">Favourite <span class="ui-li-count">12</span></a>
					<ul>
						<li>favourite 1</li>
						<li>favourite 2</li>	
					</ul>
				</li>
				<li><a href="#">Friend <span class="ui-li-count">5</span></a></li>
				<li><a href="#">Business Contact <span class="ui-li-count">7</span></a></li>

				<li data-role="list-divider">Company</li>
				<li><a href="#">Company XYZ</a></li>
				<li><a href="#">Company ABC</a></li>

				<li data-role="list-divider">Others</li>

			</ul>

		</div>
		<div data-role="footer">
			<h1>Footer</h1>
		</div>
	</div>

	<div data-role="page" id="activity">
		<div data-role="header">
			<h1>Contact Book</h1>
			<div data-role="navbar">
			  <ul>
			    <li><a href="#contact" data-icon="home" >Contact</a></li>
			    <li><a href="#history" data-icon="arrow-r">History</a></li>
			    <li><a href="#group" data-icon="search" >Group</a></li>
			    <li><a href="#activity" data-icon="plus" class="ui-btn-active ui-state-persist">Activity</a></li>
			  </ul>
			</div>
		</div>
		<div data-role="content">
			<div data-role="button">Invite a friend</div>			
			<br><br>
			<ul data-role="listview">
				<li><a href="#">Pending List<span class="ui-li-count">3</span></a></li>
				<li><a href="#">Suggesting List<span class="ui-li-count">7</span></a></li>
				<li><a href="#">Inviting List<span class="ui-li-count">4</span></a></li>
			</ul>
		</div>
		<div data-role="footer">
			<h1>Footer</h1>
		</div>
	</div>

</body>
</html>
